<template>
  <div class="detailNav">
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value"
        :options="option"
        @change="handleChange"
        @open="handleOpenMenu"
      />
    </van-dropdown-menu>
    <div class="WC-box" :class="{active:isActiveWC}" @click="showWC">独卫</div>
    <div class="a" :class="{active:isActiveHotHouse}" @click="showHotHouse">热门</div>
  </div>
</template>

<script>
export default {
  name: "detailnav",
  data() {
    return {
      value: -1,
      option: [
        { text: "综合", value: -1 },
        { text: "价格降序", value: 0 },
        { text: "价格升序", value: 1 },
      ],
      isActiveWC: false,
      isActiveHotHouse: false,
      isActive: false
    };
  },
  methods: {
    handleChange(val) {
      val == -1
        ? this.$router.push("/areasearch/synthesize")
        : val == 0
        ? this.$router.push("/areasearch/spricedescending")
        : this.$router.push("/areasearch/spriceascending");
    },
    showWC() {
      this.isActiveWC = true;
      this.isActiveHotHouse = false;
      this.$router.push("/areasearch/independentwc");
    },
    showHotHouse() {
      this.isActiveHotHouse = true;
      this.isActiveWC = false;
      this.$router.push("/areasearch/hothouse");
    },
    handleOpenMenu() {
      this.value == -1
        ? this.$router.push("/areasearch/synthesize")
        : this.value == 0
        ? this.$router.push("/areasearch/spricedescending")
        : this.$router.push("/areasearch/spriceascending");
    },
  },
  watch: {
    value(val) {
      this.isActiveWC = false;
      this.isActiveHotHouse = false;
    },
  },
  created() {
    this.value =
      this.$route.path == "/areasearch/synthesize"
        ? -1
        : this.$route.path == "/areasearch/spricedescending"
        ? 0
        : this.$route.path == "/areasearch/spriceascending" ? 1 : 3;
  },
};
</script>

<style>
.detailNav {
  display: flex;
  height: 50px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(100, 100, 100, 0.1);
}
.van-dropdown-menu {
  flex: 1;
}
.van-dropdown-menu > div {
  box-shadow: none;
}
.detailNav .WC-box,
.detailNav .a {
  flex: 1;
  line-height: 50px;
  text-align: center;
}
.active {
  color: #ff5654;
}
</style>